<template>
  <div class="flex-center">
    <div class="flex-shrink-0 pr16 border-right">
      <div class="flex-center">
        <img v-if="options.unfinishedCount === 0" src="@/assets/img/shebaopaidan/blueright.png" style="width: 16px; height: 16px" />
        <img v-else src="@/assets/img/shebaopaidan/rectangle.png" style="width: 16px; height: 16px" />
        <a-tooltip placement="top" :title="options.missionName">
          <div class="fs18 fw600 mh8 ellipsis pointer" style="width: 240px">{{ getName(options.missionName) }}</div>
        </a-tooltip>
        <div v-if="options.currentUserReceive" class="ph4 br4 fs12" style="border: 1px solid #32ccaa; color: #32ccaa">已接单</div>
        <div v-else class="ph4 br4 fs12" style="border: 1px solid rgba(255, 165, 38, 0.6); color: #ffbb00">未接单</div>
      </div>
      <div class="now-left-time">
        {{ moment(options.gmtCreate).format("YYYY-MM-DD HH:mm") }}
      </div>
    </div>
    <div class="flex-1 flex-center" style="color: #9c9c9c">
      <div class="ph16 border-right">
        <div>派单人数</div>
        <div class="fs18 fw500 mt4 tc-l1">{{ options.dispatchEmpCount }}人</div>
      </div>
      <div class="ph16">
        <div>已完成</div>
        <div class="fs18 fw500 mt4 tc-l1">{{ options.completedCount }}人</div>
      </div>
      <div class="ph16">
        <div>未完成</div>
        <div class="fs18 fw500 mt4 tc-l1">{{ options.unfinishedCount }}人</div>
      </div>
      <div class="ph16 border-right">
        <div>异常</div>
        <div class="fs18 fw500 mt4 tc-l1">{{ options.abnormalCount }}人</div>
      </div>
    </div>
    <div style="flex-shrink-0 ml12">
      <span v-if="options.fileType === 2" class="tc-theme pointer" @click="modalVisible = true">查看图片</span>
      <span v-else class="tc-theme pointer" @click="handleEvent(options)">查看详情</span>
    </div>
    <a-modal v-model="modalVisible" title="查看图片" width="550px">
      <div slot="footer" class="ta-right">
        <a-space :size="16">
          <a-button @click="modalVisible = false">取消</a-button>
          <a-button v-if="!options.currentUserReceive" type="primary" @click="doConfirm">确认接单</a-button>
        </a-space>
      </div>
      <div class="flex-center pointer" style="flex-wrap: wrap">
        <div
          v-for="(url, idx) in urls"
          :key="url"
          class="ml12 mb12"
          :style="{
            width: '150px',
            height: '90px',
            'background-image': `url('${url}?x-oss-process=image/resize,w_150')`,
            'background-size': 'contain',
            'background-repeat': 'no-repeat',
            'background-position': 'center'
          }"
          @click="previewImg(idx)"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "Contentitem",
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      modalVisible: false
    };
  },
  computed: {
    urls() {
      return this.options.fileUrl ? this.options.fileUrl.split(",") : [];
    }
  },
  methods: {
    previewImg(idx) {
      this.$viewerApi({
        images: this.urls,
        options: {
          initialViewIndex: idx
        }
      });
    },
    doConfirm() {
      this.$request({
        url: `/hr/api/v1/missionCenters/confirmReceive/${this.options.id}`,
        method: "PUT"
      })
        .then(() => {
          this.$message.success("接单成功");
          this.modalVisible = false;
          this.$emit("received");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleEvent(e) {
      this.$emit("change", e);
    },
    getName(name) {
      return name;
    }
  }
};
</script>

<style lang="scss" scoped></style>
